<!DOCTYPE html>
<html lang="zh-cn" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>jQuery</title>
</head>
<script src="node_modules/jquery/dist/jquery.js"></script>
<style>
    .oBtn {
        width: 100px;
        height: 30px;
    }
    #hideCheck{
        display: none;
    }
</style>

<body>
    <input class="oBtn" type="button" value="反选" id="Invert" />
    <input class="oBtn" type="button" value="全选" id="checkAll" />
    <div id="checkboxDiv">
        <input type="checkbox" name="oItem" class="checkItem" />新闻
        <input type="checkbox" name="oItem" class="checkItem" />图片
        <input type="checkbox" name="oItem" class="checkItem" />视频
        <input type="checkbox" name="oItem" class="checkItem" />书籍
        <input type="checkbox" name="oItem" class="checkItem" />贴吧
        <input type="checkbox" name="oItem" class="checkItem" />综合
    </div>
    <input id="hideCheck" type="checkbox" />
    <script>
        //checked数量为6时改变按钮value
        ChangeText = () => {
            if ($(':checked').length == 6) {
                $('#checkAll').prop('value', '取消全选')
            } else {
                $('#checkAll').prop('value', '全选')
            }
        }
        //全选按钮点击事件
        $('#checkAll').on('click', () => { //
            if ($(':checked').length != 6) {
                $('#checkboxDiv :input').prop('checked', true)
                ChangeText()
            } else {
                $('#checkboxDiv :input').prop('checked', false)
                ChangeText()
            }
        })
        //checked点击事件,checked数量为6时改变按钮value
        $('#checkboxDiv :input').on('click', () => {
            ChangeText()
        })
        //反选
        $('#Invert').on('click', () => {
            $.each($('#checkboxDiv :input'), (i, item) => {
                item.checked ? item.checked = false : item.checked = true
            })
            ChangeText()
        })
    </script>
</body>

</html>
